<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h1>{{name}}</h1>
    <ul>
      <li v-for='item,index in ary'>
        <button @click='fn3'>{{item.name}}</button>
        <button @click='fn3(item,index,1,2,3)'>{{item.age}}</button>
        <button @click='fn3(item,$event,2,3,4,$event)'>{{item.age}}</button>
      </li>
    </ul>
    <button v-on:click='fn'>button</button>
    <button @click.stop='fn2'>button2</button>
  </div>
</body>

</html>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      name: "珠峰",
      ary:[{name:1,age:1},{name:13,age:13},{name:14,age:14}]
      // fn(){
      //   console.log(this)
      // }
    },
    methods: {
      // 这里边的函数中的this都是当前实例
      fn(){},
      fn2() {
        console.log(this)
        this.fn()
      },
      fn() {
        console.log(this)
      },
      fn3(a,sw,d,f,g,h){
        console.log(arguments)
      }
    },
  });
</script>